<template>
  <div class="bost">
    <!-- 头部 -->
    <div class="nav-tab">
      <van-tabs
        swipeable
        v-model="showtime"
        line-height="0px"
        @click="tabClick"
        class="nav-tabss"
      >
        <van-tab :name="100">
          <template #title>
            <div class="nav-tab-liat" :class="{ active: showtime === 100 }">
              关注
            </div>
          </template>
        </van-tab>
        <van-tab :name="0">
          <template #title>
            <div class="nav-tab-list" :class="{ active: showtime === 0 }">
              热门
            </div>
          </template>
        </van-tab>
        <van-tab
          v-for="(item, index) in anchorList"
          :key="index"
          :name="item.id"
        >
          <template #title>
            <div
              class="nav-tab-list"
              :class="{ active: currentIndex === item.id }"
            >
              {{ item.name }}
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="nav-bar">
      <van-nav-bar>
        <template #right>
          <van-icon class="icon" name="search" size="30" />
        </template>
      </van-nav-bar>
    </div>
    <!-- hot直播 -->
    <!-- <div v-if="this.showtime === 0"> -->
    <div class="banner">
      <div
        class="bost-banner"
        v-for="(item1, index1) in bannerList"
        :key="index1"
      >
        <img class="img" :src="item1.image" alt="" />
      </div>
    </div>
    <!-- </div> -->
    <div class="list-box">
      <div class="list">
        <div
          class="anchor-item"
          v-for="(item2, index2) in contentList"
          :key="index2"
        >
          <div class="corver">
            <img class="img" :src="item2.houseImage" alt="" />
            <div class="overlay"></div>
          </div>
          <div class="detail">
            <div class="title">{{ item2.houseName }}</div>
            <div class="bottom">
              <div class="name">
                <div class="user">
                  <img class="img" :src="item2.userImage" alt="" />
                </div>
                <span>{{ item2.nickName }}</span>
              </div>
              <div class="hot">
                <span
                  ><i class="iconfont">&#xe613;</i>
                  {{ item2.visitHistory }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 直播 -->
  </div>
</template>

<script>
import { anchorHome, appAnchorContentList } from '@/api/zhubo.js'
// import { getLocal } from '@/utils/local.js'
export default {
  name: 'bost',
  data () {
    return {
      currentIndex: 0,
      bannerList: [],
      anchorList: [],
      contentList: [],
      showtime: ''
    }
  },
  methods: {
    async tabClick () {
      this.currentIndex = this.showtime

      // console.log(this.currentIndex)
      if (this.currentIndex === 100) {
        // if (getLocal('token')) {
        const res4 = await appAnchorContentList({
          pageNum: 1,
          pageSize: 10,
          query: { anchorType: 100 }
        })
        // console.log(res4)
        this.contentList = res4.data.data.records || []
        console.log('res4', this.contentList)
        // } else {
        //   this.$router.push('/login')
        // }
      } else {
        const res3 = await appAnchorContentList({
          pageNum: 1,
          pageSize: 10,
          query: { anchorType: this.currentIndex.toString() }
        })
        this.contentList = res3.data.data.records
        // console.log('res3', this.contentList)
      }
      // console.log(this.currentIndex)
    }
  },
  mounted () {
    this.showtime = 0
  },
  async created () {
    this.currentIndex = 0
    const res = await anchorHome({})
    this.bannerList = res.data.data.bannerList
    this.anchorList = res.data.data.contentColumnList
    const res1 = await appAnchorContentList({
      pageNum: 1,
      pageSize: 10,
      query: { anchorType: '0' }
    })
    this.contentList = res1.data.data.records
  }
}
</script>

<style lang="less">
.bost {
  .nav-bar {
    .icon {
      color: #505050;
      font-weight: 600;
    }
  }
  .nav-tab {
    float: left;
    padding-right: 47px;
  }
  .nav-bar {
    float: right;
  }
  .banner {
    .bost-banner {
      width: 100%;
      height: 140px;
      .img {
        width: 100%;
        height: 140px;
      }
    }
  }
  .list-box {
    // height: 1048px;
    padding: 40px 12px 110px;
    .list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .anchor-item {
        width: 170px;
        height: 156px;
        margin-bottom: 0;
        margin-top: 15px;
        .corver {
          width: 100%;
          height: 97px;
          position: relative;
          .img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            // overflow: hidden;
          }
          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
          }
        }
        .detail {
          padding: 7px 8px 11px;
          .title {
            font-size: 14px;
            color: #202020;
            font-weight: 500;
            line-height: 19px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            .name {
              width: 110px;
              height: 16px;
              font-size: 12px;
              color: #999;
              display: flex;
              align-items: center;
              line-height: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              .user {
                float: left;
                width: 16px;
                height: 16px;
                margin-right: 5px;
                .img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
                span {
                  float: left;
                  height: 16px;
                  display: block;
                  min-width: 110px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
              }
            }
            .hot {
              max-width: 2rem;
              flex-shrink: 0;
              font-size: 16px;
              color: #999;
              display: flex;
              align-items: center;
              span {
                font-size: 14px;
                .iconfont {
                }
              }
            }
          }
        }
      }
    }
  }
  .active {
    width: 56px;
    height: 28px;
    line-height: 28px;
    border-radius: 15px;
    background-color: #0085ff;
    color: #fff;
    text-align: center;
  }
}
</style>
